<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script rel="script" src="<%=basePath%>js/vue.min.js"></script>
    <script rel="script" src="<%=basePath%>js/jquery-1.11.1.js"></script>
</head>
<body>
	<input type="hidden" value="${LogisticCode }" name="LogisticCode">
	<div id="logistic" style="display: none;">
		<table id="carousel" class="table">
			<tr>
				<td colspan="2">快递单号：{{kdselect.LogisticCode }}</td>
			</tr>
			<tr>
				<td colspan="2">快递公司：{{kdselect.ShipperName }}</td>
			</tr>
			<tr>
				<template>
					<td colspan="2" v-if="kdselect.State=='0'">运单状态：无轨迹</td>
					<td colspan="2" v-if="kdselect.State=='1'">运单状态：已揽收</td>
					<td colspan="2" v-if="kdselect.State=='2'">运单状态：在途中</td>
					<td colspan="2" v-if="kdselect.State=='3'">运单状态：签收</td>
				</template>
			</tr>
			<tr v-for="kd in kdselect.Traces">
				<td>{{kd.AcceptStation}}</td>
				<td>{{kd.AcceptTime}}</td>
			</tr>						
		</table>
	</div>
	
<style type="text/css">
.table{
	width: 100%;
	border-collapse: collapse;
}
.table tr{
	height:50px;
	margin-top: 50px;
}
.table tr td{
	border-bottom:1px solid #e0e0e0;
}
</style>	
	
<script type="text/javascript">
$(function(){
	var LogisticCode =$('[name="LogisticCode"]').val();
	$.post("KdSelect",{"LogisticCode":LogisticCode},function(data){
		$("#logistic").css("display","block");
    		var kd = new Vue({
   		    el: '#carousel',
   		    data: {
   		    	kdselect: data
   		    },
   		})  
   	},"json");
});	


</script>	
</body>
</html>